<script setup>
import { ref } from 'vue'
const message = ref('Hello World')
const checked = ref(false)
const checkedNames = ref([])
const picked = ref('')
const selected = ref(null)

const options = ref([
  { text: 'One', value: 'A' },
  { text: 'Two', value: 'B' },
  { text: 'Three', value: 'C' }
])
</script>

<template>
    <!-- 文本 -->
    <p>Message is: {{ message }}</p>
    <input v-model="message" placeholder="edit me" />
    <br/>
    <input v-model.lazy="message" placeholder="edit me" />
    <br/>
    <input v-model.number="message" placeholder="edit me" />
    <br/>
    <!-- 多行文本 -->
    <span>Multiline message is:</span>
    <p style="white-space: pre-line;">{{ message }}</p>
    <textarea v-model="message" placeholder="add multiple lines"></textarea>
    <!-- 复选框 -->
    <p>Checked is: {{ checked }}</p>>
    <input type="checkbox" id="checkbox" v-model="checked" />
    <label for="checkbox">{{ checked }}</label>
    <div>Checked names: {{ checkedNames }}</div>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames" />
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
    <label for="mike">Mike</label>
    <div>Picked: {{ picked }}</div>
    <!-- 单选按钮 -->
    <input type="radio" id="one" value="One" v-model="picked" />
    <label for="one">One</label>
    <input type="radio" id="two" value="Two" v-model="picked" />
    <label for="two">Two</label>
    <!-- 选择器 -->
    <div>Selected: {{ selected }}</div>
    <select v-model="selected" multiple>
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    </select>
    <div>Selected: {{ selected }}</div>
    <select v-model="selected">
        <option v-for="option in options" :value="option.value" :key="option.value">
            {{ option.text }}
        </option>
    </select>
</template>